<template>
<div class>
  <head title="Help center"></head>
  <scroller class="wrapper">
    <div class="bannerList">
      <div class="topBanner" v-for="(item,index) in helpList" :key="index">
        <div
          class="itemTap bb br"
          @click="gonext('root:app/user/help/questionList.js',{id:item.id})"
        >
          <image
            class="iconSold"
            v-if="item.title.indexOf('Delivery')>-1"
            src="root:img/icon01.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Returns')>-1"
            src="root:img/help/icon02.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Post')>-1"
            src="root:img/help/icon03.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Feedback')>-1"
            src="root:img/help/icon04.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Missing')>-1"
            src="root:img/help/icon05.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Cancellation')>-1"
            src="root:img/help/icon06.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Payment')>-1"
            src="root:img/help/icon07.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Receipt')>-1"
            src="root:img/help/icon08.png"
          />
          <image
            class="iconSold"
            v-if="item.title.indexOf('Security')>-1"
            src="root:img/help/icon09.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Out Of Stock')>-1"
            src="root:img/help/icon10.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title=='Order Refund'"
            src="root:img/help/icon11.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('My Order')>-1"
            src="root:img/help/icon12.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Allergic')>-1"
            src="root:img/help/icon13.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('COVID')>-1"
            src="root:img/help/icon14.png"
          />
          <image
            class="iconSold"
            v-else-if="item.title.indexOf('Contact')>-1"
            src="root:img/help/icon15.png"
          />
          <text class="icontit">{{item.title}}</text>
        </div>
      </div>
    </div>
    <!-- <text class="title">Other</text>
    <x-cell-->
    <!-- v-for="(item,index) in helpList"
      :key="index"
      :title="item.title"
      :hasArrow="true"
      @cellClick="gonext('root:app/user/help/questionList.js',{id:item.id})"
    ></x-cell>-->
    <!-- <x-cell title="问题1" @cellClick="gonext('root:app/user/help/question.js',{type:0})"> </x-cell>
    <x-cell title="问题1" @cellClick="gonext('root:app/user/help/question.js',{type:0})"> </x-cell>-->
  </scroller>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import { get_help_type } from "../../../mixin/ajax";
export default {
  components: {
    "x-cell": require("../../../component/cell.vue")
  },
  data() {
    return {
      helpList: []
    };
  },
  created() {
    get_help_type({}, (res, flag) => {
      if (flag) {
        this.helpList = res.data;
      }
    });
  },
  methods: {
    onLoad() {},
    gonext(url, parmar) {
      this.push(url, parmar);
    }
  }
};
</script>

<style scoped="scoped">
.wrapper {
  background-color: #f5f5f5;
}

.bannerList {
  background-color: #ffffff;
  flex-direction: column;
}

.topBanner {
  width: 750px;
  flex-direction: row;
  height: 122px;
}

.itemTap {
  flex: 1;
  padding-left: 30px;
  align-items: center;
  flex-direction: row;
  height: 122px;
}

.title {
  padding: 0 32px;
  height: 65px;
  line-height: 65px;
  font-size: 24px;
  color: #888888;
}

.icontit {
  font-size: 32px;
  color: #333333;
  margin-left: 24px;
}

.iconSold {
  width: 38px;
  height: 42px;
}

.br {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #dddddd;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #dddddd;
}

.iconBuy {
  width: 44px;
  height: 44px;
}

.iconBalance {
  width: 40px;
  height: 44px;
}

.iconDispute {
  width: 38px;
  height: 42px;
}
</style>
